<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../000-assets/js/react.development.js"></script>
    <script src="../000-assets/js/react-dom.development.js"></script>
    <script src="../000-assets/js/babel.min.js"></script>
  </head>
  <body>
    <div id="root"></div>
    <script type="text/babel">
      /*
            jsx的注意事项：
                1. jsx不是字符串，可以直接写html代码，不要加引号
                2. jsx中html标签要小写，react组件应该大写开头
                3. 在jsx中，有且只有一个根标签
                4. jsx的标签必须正确结束，比如html5中允许<input>不写 / , 但是jsx中必须写
                5. 在jsx中可以使用{}嵌入表达式
                    - 什么是表达式？
                    - 简单来说，如果这句代码你放个变量在左边接收，没有违和感的就可以被定义为表达式
                    - 说白了就是代码一定会返回一个值，那就是表达式
                6. 如果表达式是null、布尔值、undefined等等值，将不会显示
                7. 在jsx中，属性可以直接在标签中设置,
                    不过要注意class要写成className。事件绑定要用驼峰式写法
                    style必须使用对象形式+驼峰命名，而且是双层大括号，第一层代表里面是js表达式，第二层表示这是个对象
                    比如style={{fontSize:"12px"}}; 
      */

      const div = (
        <div
          onClick={() => {
            console.log("我是个div");
          }}
          className="box"
          style={{ fontSize: "22px" }}
        >
          我是一个div
        </div>
      );
      const root = ReactDOM.createRoot(document.querySelector("#root"));
      root.render(div);
    </script>
  </body>
</html>
